<template>
  <div class="login">
    <form @submit.prevent="handleSubmit">
      <div class="input-group">
        <label for="username">账号</label>
        <input id="username" v-model="form.username" type="text" required />
      </div>
      <div class="input-group">
        <label for="password">密码</label>
        <input id="password" v-model="form.password" type="password" required />
      </div>
      <div class="button-group">
        <button type="submit" class="btn-submit" @click="submit()">提交</button>
        <button type="reset" class="btn-reset">重置</button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'LoginForm',
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
submit() {
  // 验证用户的用户名和密码
  if (this.form.username === "123" && this.form.password === "123") {
    // 如果验证通过，则将isLoggedIn设置为true，表示已经成功登录
    localStorage.setItem('isLogggedIn','true');
    this.$router.replace('/personal-center');
  } else {
    alert("用户名或密码不正确");
  }
},
reset() {
  this.form.username = ''; // 修正此处，以确保重置的是 form 对象中的 username 和 password
  this.form.password = '';
}
}
}
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}

.input-group {
  display: flex;
  flex-direction: column;
  width: 300px;
  margin-bottom: 20px;
}

.input-group label {
  margin-bottom: 10px;
}

.input-group input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.button-group {
  display: flex;
  justify-content: space-between;
  width: 300px;
}

.btn-submit {
  background-color: #284ca7;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-submit:hover {
  background-color: #215188;
}

.btn-reset {
  background-color: #f8f9fa;
  color: #6c757d;
  border: 1px solid #ced4da;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-reset:hover {
  background-color: #e9ecef;
}
.login {
/* height: 100%; */
/* margin: 0; */
display: flex;
justify-content: center;
align-items: center;
}
</style>